    <template>
    <div class="mod-log">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
                prop="id"
                header-align="center"
                align="center"
                width="170"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="username"
                header-align="center"
                align="center"
                width="120"
                label="用户名">
            </el-table-column>
            <el-table-column
                prop="operation"
                header-align="center"
                align="center"
                width="100"
                label="用户操作">
            </el-table-column>
            <el-table-column
                prop="method"
                header-align="center"
                align="right"
                width="180"
                :show-overflow-tooltip="true"
                label="请求方法">
            </el-table-column>
            <el-table-column
                prop="params"
                header-align="center"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="请求参数">
            </el-table-column>
            <el-table-column
                prop="time"
                header-align="center"
                align="center"
                label="执行时长(ms)">
            </el-table-column>
            <el-table-column
                prop="ip"
                header-align="center"
                align="center"
                width="150"
                label="IP地址">
            </el-table-column>
            <el-table-column
                prop="createDate"
                header-align="center"
                align="center"
                width="180"
                :formatter="formatDate"
                label="创建时间">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
    import {sysLogList} from '../../api/api';
    import {getTime} from '../../api/commonUtil';

    export default {
        data() {
            return {
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                dataListLoading: false,
                selectionDataList: []
            }
        },
        created() {
            this.getDataList()
        },
        methods: {
            formatDate: function (row, column) {
                return row.createDate == null ? 'NUll'  : getTime( row.createDate) ;
            },
            // 获取数据列表
            getDataList() {
               this.dataListLoading = true;
               let params =  {
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'key': this.dataForm.key
                }
                sysLogList(params).then((res) => {
                    if (res.status ) {
                        this.dataList = res.data.list
                        this.total = parseInt(res.data.totalCount)
                        this.pageIndex = parseInt(res.data.currPage)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            }
        }
    }
</script>
